<!--
 * @Date: 2022-03-25 10:39:22
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-25 13:43:10
 * @FilePath: \vue3Components\src\components\ChooseIcons.vue
 * @Description: something
-->
<template>
  <el-button :type="type" @click="handlerClick">
    <slot></slot>
    <div>
      <el-dialog v-model="dialogVisible" :title="title">
        <div class="container">
          <div
            v-for="(icon, index) in Object.keys(Icons)"
            :key="index"
            class="icon"
            @click="copyIcon(icon)"
          >
            <div>
              <!-- 动态组件 -->
              <component :is="`el-icon-${toLine(icon)}`" style="width: 2em; height: 2em;"></component>
            </div>
            <div>{{ icon }}</div>
          </div>
        </div>
      </el-dialog>
    </div>
  </el-button>
</template>
 <script lang='ts' setup>
import { watch } from 'vue';
import * as Icons from "@element-plus/icons-vue";
import { toLine } from '../utils'
import { useCopy } from '../hooks/useCopy'
const props = defineProps<{
  dialogVisible: boolean,
  title: string,
  type: string
}>()
const emits = defineEmits(['showDialog'])
const handlerClick = () => {
  emits('showDialog', !props.dialogVisible)
}
const copyIcon = (icon: string) => {
  console.log(icon);
  icon = `<el-icon-${toLine(icon)} />`
  useCopy(icon)
  emits('showDialog', !props.dialogVisible)
}
watch(() => props.dialogVisible, val => {
  emits('showDialog', val)
})
</script>
<style lang='less' scoped>
:deep(.el-dialog__body) {
  height: 500px;
  overflow-x: scroll;
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .icon {
      width: 25%;
      height: 50px;
      margin-bottom: 30px;
    }
  }
}
</style>